<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
            <el-form-item prop="categoryId">
                <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="util.intTimePickerOptions()">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.name" auto-complete="off" placeholder="请输入搜索内容" clearable @keyup.enter.native="search"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="search">搜索</el-button>
                <!-- <el-button class="form-search-btn" type="primary" @click="reset">重置</el-button> -->
            </el-form-item>
        </el-form>
        <el-row class="overclick-wrap">
            <el-col :span="24">
                <div class="item-wrap">
                    <div class="item-content">
                        <p class="item-title">资料总数（个）</p>
                        <p class="item-value color-4">{{ total }}</p>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="more-btns">
            <el-button type="primary" @click="addData">新增</el-button>
            <el-button type="primary" @click="batchDeletion">批量删除</el-button>
        </div>
        <el-table
        v-loading="loading"
        ref="learnBankTableList"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column
                width="50"
                label="序号"
                type="index">
            </el-table-column>
            <el-table-column 
            prop="coverUrl" 
            label="封面" >
                <!-- 图片的显示 -->
                <template  slot-scope="scope">            
                <img :src="scope.row.coverUrl?scope.row.coverUrl:defaulLearn"  width="50" height="50"  @click="$imgPreview" :data-imgpreview="scope.row.coverUrl?scope.row.coverUrl:defaulLearn"/>
                </template> 
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题">
            </el-table-column>
            <el-table-column
                prop="label"
                label="标签">
                <template slot-scope="scope">
                    <el-tag style="margin-top:5px;margin-left:10px;" effect="dark"  v-for="item in scope.row.label.split(',')" v-bind:key="item">
                        {{item}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="learningTime"
                label="学习时长（分钟）"
                :formatter="learningTimeFormatter">
            </el-table-column>
            <el-table-column
                prop="author"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                width="150"
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
                    <template v-if="scope.row.authority === 0">
                        <span class="dividing-line">|</span>
                        <el-button @click="editAssetInfo(scope.row)" type="text" size="small">编辑</el-button>
                        <span class="dividing-line">|</span>
                        <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 新增(编辑)弹窗 -->
        <el-dialog
            :close-on-click-modal="false"
            :title="dialogTitle"
            width="50%"
            top='0vh'
            v-if="dialogVisible"
            :visible.sync="dialogVisible"
            @close="closeQuestionInfo"
            v-dialogDrag>
            <learn-add :oldInfo="currentQuestionInfo" :closeFun="closeQuestionInfo"></learn-add>
        </el-dialog>
        <el-dialog
            :close-on-click-modal="false"
            title="资料详情"
            v-if="dialogVisibleDetails"
            :visible.sync="dialogVisibleDetails"
            width="50%"
            top='0vh'>
         <learn-info :oldInfo="currentQuestionInfo" :closeFun="closeQuestionInfo"></learn-info>
        </el-dialog>
    </div>
</template>
<script>
import util from '@/utils/util'
import { qnToken} from '@/api/api'
import SelectLabel from '../Examination/Common/SelectLabel'
import LearnAdd from './Dialog/LearnAdd'
import LearnInfo from './Dialog/LearnInfo'
import { selectLearningMaterialsList,deleteLearningMaterials,getLearningMaterialsDetail,saveLearningMaterials} from '@/api/rdLearnOrg'

let TYPEMAP = {
    dryVideoQiniuData: '视频',
    dryPicQiniuData: '图片',
}
export default {
    
    components: {
        SelectLabel,
        LearnAdd,
        LearnInfo
    },
    data() {
        return {
            learnCount:100,//学习资料总数
            multipleSelection: [],//被选中的行
            dialogVisible: false,//新增弹出框
            dialogVisibleDetails: false,//查看弹窗
            util:util,//富文本
            detailsList:{},//资料详情
            labelLength:'',//标签个数
            labeldetailList:[],//详情标签列表
            tableData:[],//学习资料列表
            isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
            labelList:[],
            //搜索
            searchForm: {
                name: '',
                time: ''
            },
            // 视频
            dryVideoQiniuData: {
                key : '',
                fileList:[],
            },
            dryPicQiniuData: {
                key : '',
                fileList:[],
            },
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            dialogTitle: '新增资料',
            currentQuestionInfo:{},
            defaulLearn: this.GLOBAL.defaulLearn,
            loading: false,
        }
    },
    created() {
        let that = this
        that.getTableList(); //获取列表数据
    },
    methods: {
        //搜索
        search(){
            let that = this;
            that.currentPage =1
            that.getTableList();
        },
        //重置
        // reset(){},
        // 详情
        handleDetail(row) {
            let that = this
            that.currentQuestionInfo = row
            //detailsList[]
            that.dialogVisibleDetails = true;
            
        },
        // 编辑
        editAssetInfo(row) {
            let that = this 
            that.dialogVisible = true;
            that.dialogTitle = '编辑资料'
            that.currentQuestionInfo = row
        },
        addData(){
            let that = this;
            that.dialogTitle = '新增资料'
            that.currentQuestionInfo = {}
            that.dialogVisible = true
        },
        //多选框
        handleSelectionChange(val) {
           let that= this;
           that.multipleSelection = val;
        },
        //批量删除
         batchDeletion(){
            let ids = []
            let that = this;
            let selectList = this.multipleSelection
            if(selectList.length > 0) {
                // 确认弹框
                this.$confirm('确认删除选中的学习资料吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                roundButton: true
                }).then(() => {
                for(var i=0,len=selectList.length; i < len; i++) {        
                    ids.push(selectList[i].id)
                }
                //删除接口 
                 deleteLearningMaterials({ids:String(ids)}).then(res=>{
                     if(res.status === 200) {
                        that.$message({
                            message: '删除成功！',
                            type: 'success'
                        })
                        // 刷新页面
                        that.getTableList();
                    }
                 })
                }).catch(() => {
                })
            } else {
                that.$message.warning('请勾选你要删除的学习资料')
            }
         },
         // 删除
        deleteUser(row) {
            let that = this 
            that.$confirm('确认删除选中的学习资料吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            roundButton: true
            }).then(() => {
            //删除接口 
                deleteLearningMaterials({ids:row.id}).then(res=>{
                if(res.status === 200) {
                    that.$message({
                        message: '删除成功！',
                        type: 'success'
                    })
                        // 刷新页面
                    that.getTableList();
                }
                })
            }).catch(() => {
            })
        },
        //获取列表数据
        getTableList(pageIndex, pageSize){
            let that = this;
            that.loading =true;
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames={
                queryType: 1,
                pageIndex: that.currentPage-1,
                pageSize: that.pageSize,
                startTimeStr: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00'  : '',
                endTimeStr:that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59'  : '',
                queryContent: that.searchForm.name,
            }
            
            selectLearningMaterialsList(parames).then(res => {
                that.tableData = res.data;
                that.total = res.total;
                this.$nextTick(() => {
                    that.loading =false; 
                })
                
            })
        },
        handleCurrentChange(currentPage) {
            this.getTableList(currentPage)
        },
        handleSizeChange(pageSize) {
            this.getTableList(1, pageSize)
        },
        handleSelect(){//处理添加标签

        },
        //关闭弹窗
        closeQuestionInfo(refresh) {
            let that= this;
            that.dialogVisibleDetails = false
            that.dialogVisible = false
            if(typeof(refresh) === 'boolean' && refresh) {
                this.getTableList(this.currentQuestionInfo.id?'':1);
            }
            that.currentQuestionInfo = {}
        },
        learningTimeFormatter:function (row, column) {
            return row.learningTime
        }
    },
}
</script>
<style lang="scss" scoped>
    .model-split-line {
        margin-top: 10px;
        border-bottom: 1px solid #DCDFE6;
        margin-bottom: 10px;
    }
</style>